<template>
  <div>
    <div id="WxLoginImg"></div>
    <div style="text-align: center;">登录即代表你同意<span style="color: #c90000;">《鹿线AI用户协议》</span></div>
  </div>

</template>
<script lang='ts' setup>
import { getLoginParam } from '@/api/login'
import { onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
import { ref } from 'vue';
const scriptRef = ref(null); //微信 js-SDK创建的实例
// 微信登录
var obj:any = null; //微信请求实例初始化
let srcDom: HTMLScriptElement | null = null;  //script 标签

  // 创建script 标签  挂载卸载需要删除这个标签 否则会影响页面
// 这里不用 onBeforeMount  因为构建验证码需要时间，点击显示构建会卡顿
//让用户看到QRcode 构建的过程没什么
onBeforeMount(()=>{
  srcDom = document.createElement('script');
  srcDom.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
  document.body.appendChild(srcDom);

  srcDom.onload = async () => {
    // 加载完实例化对象
    let res = await getLoginParam()
    console.log(res); //请求的微信登录参数
    if (res.code != 0) return
    let { appid, redirectUri, state, scope } = res.data;
    obj = new WxLogin({
      // self_redirect: false, // 是否自动跳转
      id: "WxLoginImg", //** 展示二维码的父容器id **/
      appid,//** 微信公众号appid **/
      scope,//作用域
      // redirect_uri: redirectUri, //重定向地址
      redirect_uri: decodeURIComponent(redirectUri),
      state,
      // style: "",
      // 样式需要base64编码
      href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZX0NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9DQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7bWFyZ2luLXRvcDogO2JvcmRlcjogbm9uZTt9DQo=",

    });

  }
})



// 离开卸载script 标签节点
onBeforeUnmount(()=>{
  document.body.removeChild(srcDom)
})

  
// onBeforeUnmount(()=>{
//   // 卸载script 标签
//   document.body.removeChild(scriptRef.value)
// })



</script>
<style scoped lang='scss'>
      #WxLoginImg{
    display: flex;
      justify-content: center;
      overflow: hidden;
      width: 300px;
      height: 260px;
      } 
</style>
